<template>
  <div>
    <Modal v-model="groupJoinPop" width="35" :closable="false" :mask-closable="false"
      class-name="vertical-center-modal">
      <div slot="header" class="head-sty">
        <div class="title">{{ $t('goods.group_play_text76') }}</div>
        <Icon type="md-close" class="close" @click="closeMet()" />
      </div>
      <div class="content-sty">
        <div class="pink-area">
          <div class="flex-sty">
            <div class="list-sty">
              <div class="status-bg">
                <img src="@/assets/images/pay/img14.png" class="icon-img" alt="">
              </div>
              <div class="status-text">{{ $t('goods.group_play_text11') }}</div>
            </div>
            <img src="@/assets/images/pay/img17.png" class="drive-sty" alt="">
            <div class="list-sty">
              <div class="status-bg">
                <img src="@/assets/images/pay/img11.png" class="icon-img" alt="">
              </div>
              <div class="status-text">{{ $t('goods.group_play_text12') }}</div>
            </div>
            <img src="@/assets/images/pay/img12.png" class="drive-sty" alt="">
            <div class="list-sty">
              <div class="status-bg">
                <img src="@/assets/images/pay/img16.png" class="icon-img" alt="">
              </div>
              <div class="status-text">{{ $t('goods.group_play_text13') }}</div>
            </div>
          </div>
        </div>
        <div class="time-sty">
          <div class="xian-before"></div>
          <div class="time">
            <div class="time-end">
              <div class="rect-bg">{{ hours }}</div>
              <div class="drive-icon">:</div>
              <div class="rect-bg">{{ min }}</div>
              <div class="drive-icon">:</div>
              <div class="rect-bg">{{ sec }}</div>
            </div>
          </div>
          <div class="xian-after"></div>
        </div>
        <div class="text-sty77">{{ $t('goods.group_play_text77') }}</div>
        <div class="text-sty">{{ $t('goods.group_play_text14') }}:</div>
        <div class="sub-tit" v-html="$t('goods.group_play_text15', { num: numMet() })"></div>
        <div class="sub-tit"><b> · </b>{{ $t('goods.group_play_text74') }}</div>
        <div class="sub-tit"><b> · </b>{{ $t('goods.group_play_text17') }}</div>
        <div class="sub-tit"><b> · </b>{{ $t('goods.group_play_text18') }}</div>
        <div class="text-sty">{{ $t('goods.group_play_text22') }}:</div>
        <div class="gray-sty">
          <share-list :data="shareJoinArr" heightVal="132px"></share-list>
        </div>
        <div class="tip-text">{{ $t('goods.group_play_text30') }}</div>
      </div>
      <div slot="footer" class="footer-wrap">
        <div class="cancel-text" @click="downLoadMet()">{{ $t('goods.group_play_text75') }}</div>
        <div class="confirm-text" @click="confirmBtn()">{{ $t('user.copyLink') }}</div>
      </div>
    </Modal>
    <group-poster-pop ref="posterRef"></group-poster-pop>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { bigTimes, bigMinus } from "@/common/digital-computation";
import shareList from '../../pay/compontents/share-list.vue';
import groupPosterPop from '@/views/main/pay/compontents/group-poster-pop.vue';

export default {
  components: { shareList, groupPosterPop },
  data() {
    return {
      groupJoinPop: false,
      shareJoinArr: [
        { icon: require('@/assets/images/pay/img1.png'), name: 'TikTok', desc: this.$t('goods.group_play_text62') },
        { icon: require('@/assets/images/pay/img2.png'), name: 'Discord', desc: this.$t('goods.group_play_text63') },
        { icon: require('@/assets/images/pay/img3.png'), name: 'Reddit', desc: this.$t('goods.group_play_text64') },
        { icon: require('@/assets/images/pay/youTube.png'), name: 'YouTube', desc: this.$t('goods.joinBookingYouTube') },
        { icon: require('@/assets/images/pay/img4.png'), name: 'Instagram', desc: this.$t('goods.group_play_text65') },
        { icon: require('@/assets/images/pay/img5.png'), name: 'Twitter/X', desc: this.$t('goods.group_play_text66') },
        { icon: require('@/assets/images/pay/img6.png'), name: 'Facebook', desc: this.$t('goods.group_play_text67') },
        { icon: require('@/assets/images/pay/img7.png'), name: 'WhatsApp', desc: this.$t('goods.group_play_text58') },
        { icon: require('@/assets/images/pay/img8.png'), name: 'Telegram', desc: this.$t('goods.group_play_text59') },
        { icon: require('@/assets/images/pay/img9.png'), name: 'Pinterest', desc: this.$t('goods.group_play_text60') },
        { icon: require('@/assets/images/pay/img10.png'), name: 'Snapchat', desc: this.$t('goods.group_play_text61') }
      ],
      info: {},
      hours: '00',
      min: '00',
      sec: '00',
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      config: state => state.config.config,
      userInfo: state => state.user.userInfo,
      userLanguage: state => state.user.userLanguage
    })
  },
  methods: {
    numMet() {
      if (this.userLanguage.code == 'zh_CN') {
        if (this.info.orderGroupVo) {
          const num = bigTimes(this.info.orderGroupVo.discount, 100);
          return this.chineseDiscount(num);
        }
      } else {
        if (this.info.orderGroupVo) {
          return bigTimes(this.info.orderGroupVo.discount, 100);
        }
      }
    },
    chineseDiscount(num) {
      if (0 <= num && num <= 100) {
        const discount = num / 10;
        if (discount === 10) {
          return '不打折';
        } else if (discount === 0) {
          return '免费';
        } else {
          return `${bigMinus(10, discount)}`;
        }
      } else {
        return '无效折扣数值';
      }
    },
    open(item, timestamp) {
      this.info = item;
      this.countDown(timestamp, item.orderGroupVo.inviteEndTimestamp);
      this.groupJoinPop = true;
    },
    closeMet() {
      this.groupJoinPop = false;
    },
    downLoadMet() {
      // 点击“复制邀请链接”或“下载邀请海报”打点
      if (this.$analytics) {
        this.$analytics.logEvent('pt_1004');
      }
      this.groupJoinPop = false;
      let data = {
        ...this.info.orderGroupVo,
        spuNo: this.info.spuNo,
        channel: this.info.channel
      }
      this.$refs.posterRef.open(data);
    },
    confirmBtn() {
      // 点击“复制邀请链接”或“下载邀请海报”打点
      if (this.$analytics) {
        this.$analytics.logEvent('pt_1004');
      }

      const url = `${this.config.webDomain}/goods/details?id=${this.info.spuNo}&&channel=${this.info.channel}&&inviteCode=${this.userInfo.inviteCode || ''}&&activityCode=${this.info.orderGroupVo.activityCode} ,I just joined a Group Buy on 100buy and got this product for ${bigTimes(Number(this.info.orderGroupVo.discount), 100)}% off, saving $${this.info.orderGroupVo.discountAmount} ! You should check it out too!`;
      this.onCopy(url);
      this.groupJoinPop = false;
    },
    onCopy(info) {
      // 复制
      let _this = this;
      this.$copyText(info).then(function () {
        _this.$Message.success(_this.$t('goods.group_play_text47'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
    timeFormat(param) {
      return param < 10 ? '0' + param : param;
    },
    countDown(newTime, endTime) {
      clearInterval(this.interval);
      this.interval = null;
      this.interval = setInterval(() => {
        // 对结束时间进行处理渲染到页面
        let obj = null;
        // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = endTime - newTime;
          // 获取时、分、秒
          let hours = parseInt(time / (1000 * 3600));
          let remainingSeconds = time % (1000 * 3600);
          let min = parseInt(remainingSeconds / (1000 * 60));
          let sec = parseInt((remainingSeconds % (1000 * 60)) / 1000);
          obj = {
            hours: this.timeFormat(hours),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
          newTime += 1000;
        } else { // 活动已结束，全部设置为'00'
          obj = {
            hours: '00',
            min: '00',
            sec: '00'
          };
          clearInterval(this.interval);
        }
        this.hours = obj.hours;
        this.min = obj.min;
        this.sec = obj.sec;
      }, 1000);
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 12px;

  .ivu-modal-header {
    border: none;
    padding: 32px 32px;
  }

  .ivu-modal-body {
    padding: 0 4px 0 32px;
  }

  .ivu-modal-footer {
    border: none;
    padding: 32px;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }

    .close {
      color: #1E1714;
      font-size: 36px;
      font-weight: 500;
      cursor: pointer;
    }
  }

  .content-sty {
    padding-right: 20px;
    height: 420px;
    overflow: auto;

    .pink-area {
      width: 100%;
      min-height: 124px;
      padding: 20px 25px;
      background: #FFEEF4;
      border-radius: 12px 12px 12px 12px;
      text-align: center;

      .flex-sty {
        display: flex;
        justify-content: space-around;

        .list-sty {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1;

          .status-bg {
            width: 48px;
            height: 48px;
            background: #FFFFFF;
            border-radius: 12px 12px 12px 12px;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon-img {
              width: 24px;
              height: 24px;
            }
          }

          .status-text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #1E1714;
            line-height: 24px;
            margin-top: 12px;
          }

          .enter-btn {
            padding: 4px 10px;
            min-width: 143px;
            min-height: 30px;
            background: #1E1714;
            border-radius: 22px 22px 22px 22px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 19px;
            cursor: pointer;
            margin-top: 12px;
          }
        }

        .drive-sty {
          width: 36px;
          height: 10px;
          margin-top: 21px;
        }
      }
    }

    .text-sty77 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #FF186B;
      line-height: 19px;
      margin-top: 8px;
      text-align: center;
    }

    .time-sty {
      display: flex;
      gap: 32px;
      margin-top: 16px;

      .xian-before {
        width: 218px;
        height: 0px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 127, 157, 1)) 2 2;
        margin-top: 15px;
      }

      .time {
        display: flex;
        flex-direction: column;
        align-items: center;

        .time-end {
          display: flex;
          align-items: center;
          gap: 12px;

          .rect-bg {
            width: 30px;
            height: 30px;
            background: linear-gradient(346deg, #FF326C 0%, #FF3810 100%);
            border-radius: 5px 5px 5px 5px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 19px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .drive-icon {
            font-weight: 600;
            font-size: 16px;
            color: #FF326C;
            line-height: 22px;
          }
        }


      }

      .xian-after {
        width: 218px;
        height: 0px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(255, 127, 157, 1), rgba(255, 255, 255, 0)) 2 2;
        margin-top: 15px;
      }
    }

    .sub-tit {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #767B93;
      line-height: 21px;
      margin-top: 12px;

      :deep(span) {
        color: #FF186B;
      }
    }

    .text-sty {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #1E1714;
      line-height: 21px;
      margin-top: 16px;
      margin-top: 16px;
    }

    .gray-sty {
      width: 100%;
      // height: 198px;
      padding: 16px 4px 16px 16px;
      background: #F5F6FA;
      border-radius: 12px 12px 12px 12px;
      border: 1px solid #E9EAF3;
      margin-top: 12px;
    }

    .tip-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #AEB0B9;
      line-height: 20px;
      margin-top: 16px;
    }
  }

  .content-sty::-webkit-scrollbar {
    width: 8px;
    /* 设置滚动条的宽度 */
  }

  .content-sty::-webkit-scrollbar-track {
    background: none;
    /* 设置轨道的背景颜色 */
  }

  .content-sty::-webkit-scrollbar-thumb {
    background: #E3E5EA;
    /* 设置滑块的背景颜色 */
    border-radius: 24px;
  }

  .footer-wrap {
    display: flex;
    justify-content: end;
    gap: 24px;

    .cancel-text {
      height: 46px;
      padding: 12px 30px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #FF186B;
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 16px;
      color: #FF186B;
      line-height: 19px;
      cursor: pointer;
    }

    .confirm-text {
      height: 46px;
      padding: 12px 30px;
      background: #F21473;
      border-radius: 8px 8px 8px 8px;
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 19px;
      cursor: pointer;
    }
  }
}
</style>
